<template>
    <!-- 
       页面级组件 （数据统计模块）=》 组件化开发   -->

    <div class="echarts1">
        <!-- 划分业务 =》 组件抽离（拆分）
                    1） 复用
                    2） 就用一次 （放在同一个文件夹里
         -->
         
        <EchartsTopNav @getEcharts="getEcharts"></EchartsTopNav>
        <!-- 可视化图表  =》 本质上：组件的封装
            1.创建一个单独的文件
         -->

         <!-- 父组件 给 子组件数据 -->
         <Wbar :echartsList="echartsList" tooltip></Wbar> 
         <Wbar :echartsList="echartsList" echartsid="ids" :echartsBar="2"></Wbar> 

         <!--封装 折线图  -->
         <Wline :echartsList="echartsList" echartsid="ids1" :echartsLine="2" tooltip></Wline>
         <!-- echartsid 是用来创建 dom结构的， 不能和其他的一样，不然就是共用同一个 -->

    </div>
 </template>
 
 <script setup lang="ts">
 import * as echarts from 'echarts';
 import EchartsTopNav from './EchartsTopNav.vue'
 import Wbar from '@/WEcharts/wbar/index.vue'
 import Wline from '@/WEcharts/wLine/index.vue'
 import { onMounted,ref } from 'vue'

//  在父组件中获取数据
let echartsList = ref({list:[],xdata:[]});

const getEcharts=(val:any)=>{
    // console.log(val,123123);   //获取到 echarts 数据    
    echartsList.value = val
    // console.log(echartsList.value,111);    
}
 
 </script>
 
 <style scoped lang="scss"> 
 </style>